
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { renderAsync } from 'docx-preview';
const props:any = defineProps({
  file: {
    required: true
  }
})

const childRef = ref(null);
function previewfile() {
  try {
      //用docx-preview渲染
      renderAsync(props.file, childRef.value).then((res) => {
        console.log('res---->', res);
      });
  } catch (error) {
    console.log('error', error)
  }
}
onMounted(() => {
  previewfile()
})
</script>
<template>
<div ref="childRef" class="childRef"></div>
</template>

<style scoped lang="scss">
.childRef {
  :deep(.docx-wrapper) {
    background-color: #fff;
    padding: 6px;
  }

  :deep(.docx-wrapper > section.docx) {
    width: 100% !important;
    padding: 12px !important;
    min-height: auto !important;
    box-shadow: none;
    margin-bottom: 0;
  }
}
</style>
